<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<html lang="zh">
<head>
    <%@include file="/lyear/common/head.jsp" %>
</head>

<body>

<div class="lyear-layout-web">
    <div class="lyear-layout-container">
        <!--左侧导航-->
        <%@include file="/lyear/common/aside.jsp" %>
        <!--End 左侧导航-->

        <!--头部信息-->
        <%@include file="/lyear/common/top.jsp" %>
        <!--End 头部信息-->

        <!--页面主要内容-->
        <!--页面主要内容-->
        <main class="lyear-layout-content">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-lg-12">
                        <div class="card">
                            <ul class="nav nav-tabs page-tabs">
                                <li class="active"><a href="#!">基本信息</a></li>
                            </ul>
                            <form action="${pageContext.request.contextPath}/author/updateAuthor/${author.id}" method="get">
                                <div class="tab-content">
                                    <div class="tab-pane active">
                                        <div class="form-group">
                                            <label for="web_site_title">昵称</label>
                                            <input class="form-control" type="text" id="web_site_title"
                                                   name="nickname" value="${author.nickname}">
                                        </div>
                                        <div class="form-group">
                                            <label>性别</label><br>
                                            <div style="height: 40px;line-height: 40px;">
                                                <%--     1男  2女  3未知--%>
                                                <c:if test="${author.gender==1}">
                                                    <input style="width: 20px" type="radio" name="gender" value="1" checked> 男
                                                    <input style="width: 20px" type="radio" name="gender" value="2" > 女
                                                    <input style="width: 20px" type="radio" name="gender" value="3" > 未知
                                                </c:if>
                                                <c:if test="${author.gender==2}">
                                                    <input style="width: 20px" type="radio" name="gender" value="1" > 男
                                                    <input style="width: 20px" type="radio" name="gender" value="2" checked> 女
                                                    <input style="width: 20px" type="radio" name="gender" value="3" > 未知
                                                </c:if>
                                                <c:if test="${author.gender==3}">
                                                    <input style="width: 20px" type="radio" name="gender" value="1" > 男
                                                    <input style="width: 20px" type="radio" name="gender" value="2" > 女
                                                    <input style="width: 20px" type="radio" name="gender" value="3" checked> 未知
                                                </c:if>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label for="web_site_tel">电话</label>
                                            <input class="form-control" type="text" id="web_site_tel"
                                                   name="tel" value="${author.tel}" onblur="checkTel()">
                                            <span id="tel" style="font-size: 12px;color: red"></span>
                                        </div>
                                        <div class="form-group">
                                            <label for="web_site_qq">QQ</label>
                                            <input class="form-control" type="text" id="web_site_qq" name="qq"
                                                   value="${author.qq}" onblur="checkQQ()">
                                            <span id="qq" style="font-size: 12px;color: red"></span>
                                        </div>
                                        <div class="form-group">
                                            <label for="web_site_wechat">微信</label>
                                            <input class="form-control" type="text" id="web_site_wechat"
                                                   name="wechat" value="${author.wechat}" onblur="checkWechat()">
                                            <span id="wechat" style="font-size: 12px;color: red"></span>
                                        </div>
                                        <div class="form-group">
                                            <label for="web_site_info">备注</label>
                                            <textarea class="form-control" id="web_site_info" rows="5"
                                                      name="info">${author.info}</textarea>
                                        </div>
                                        <span id="queren" style="font-size: 12px;color: red"></span>
                                        <div class="form-group">
                                            <button class="btn btn-primary" type="submit" onclick="return check(this.form)">确认修改
                                            </button>

                                            <button type="button" class="btn btn-default"
                                                    onclick="javascript:history.back(-1);return false;">取 消
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </main>
        <!--End 页面主要内容-->
    </div>
</div>
<script type="text/javascript" src="${pageContext.request.contextPath}/lyear/js/jquery.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/lyear/js/bootstrap.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/lyear/js/perfect-scrollbar.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/lyear/js/main.min.js"></script>
<script type="text/javascript">
    /**
     * 表单总验证
     */
    function check(form){
        let tel = $("#tel").text()
        let qq = $("#qq").text()
        let wechat = $("#wechat").text()
        if (tel != "" || qq != "" || wechat != ""){
            $("#queren").text("用户信息有误，请检查输入信息")
            return false;
        }
        if(tel.length !=0|| qq .length !=0 || wechat.length !=0){
            $("#queren").text("用户信息不完善，请先完善信息")
            return false;
        }
        alert("用户信息修改成功！")
        return true;
    }

    /**
     * 修改用户头像
     * @returns {boolean}
     */
    function updateAvatar() {
        let formData = new FormData($('#userAvatarForm')[0]);
        formData.append("avatar", $("#img")[0].files[0]);
        formData.append("id", $("#id").val());

        let uploading = false;
        if (uploading) {
            alert("文件正在上传中，请稍候!");
            return false;
        }

        $.ajax({
            url: '/projshow/user/updateAvatar', /*接口域名地址*/
            type: 'POST',
            data: formData,
            contentType: false,
            processData: false,
            dataType: "json",
            beforeSend: function () {
                uploading = true;
                console.log(uploading);
            },
            success: function (res) {
                uploading = false;
                console.log(res);
                if (res.code == 200) {
                    $("#userAvatar").attr('src', res.data);
                }
            }
        })
    }

    /**
     * 电话号码正则验证
     * @returns {boolean}
     */
    function checkTel() {
        let tel = $("input[name=tel]").val()
        console.log(tel)
        $("#tel").text("");
        let reg = /^1(?:3\d|4[4-9]|5[0-35-9]|6[67]|7[013-8]|8\d|9\d)\d{8}$/;
        if (reg.test(tel) == false) {
            $("#tel").text("以字母开头的英文字母和数字组成的4-16位字符");
            return false;
        }
        return true;
    }
    /**
     * qq正则验证
     * @returns {boolean}
     */
    function checkQQ() {
        let qq = $("input[name=qq]").val()
        console.log(qq)
        $("#qq").text("");
        let reg = /^[1-9][0-9]{4,10}$/;
        if (reg.test(qq) == false) {
            $("#qq").text("5-11位纯数字");
            return false;
        }
        return true;
    }
    /**
     * 微信正则验证
     * @returns {boolean}
     */
    function checkWechat() {
        let wechat = $("input[name=wechat]").val()
        console.log(wechat)
        $("#wechat").text("");
        let reg = /^[a-zA-Z]{1}[-_a-zA-Z0-9]{5,19}$/;
        if (reg.test(wechat) == false) {
            $("#wechat").text("仅支持6-20个字母数字、下划线或减号，以字母开头");
            return false;
        }
        return true;
    }

</script>
</body>
</html>